<template>
	<view>
		<view class="box">
			<view class="exam-list">
				<view class="exam-item" v-for="(item,index) in 18">
					<p>10月</p>
					<p>17日</p>
					<p style="font-size: 25rpx;">可预约</p>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
@num:7;
@interval:4px;
.box{
	padding: 10rpx 4%;
	.exam-list {
	    display: flex;
	    justify-content: flex-start;
	    align-items: center;
	    flex-wrap: wrap;
	    .exam-item {
	      flex: 1;
	      // height: 50px;
		  padding: 20rpx 0;
	      text-align: center;
	      margin: 0 @interval @interval 0; // 间隙为20px
	      border: 1px solid #888;
	      box-sizing: border-box;
	      
	      //width: calc((100% - (@num-1) * 20px) / @num);   // 我这里一行显示4个 所以是/4  一行显示几个就除以几 
		  width: calc((100% - (@num - 1)*@interval) / @num);
		  // 这里的60px = (分布个数4-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
	      min-width: calc((100% - (@num - 1)*@interval) / @num);  
	      max-width: calc((100% - (@num - 1)*@interval) / @num);  
	      &:nth-child( @{num}n + @{num}){
	        margin-right: 0;
	      } 
	    }
	}
}
</style>
